<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Contrast - UIkit tests</title>

        <script src="../_test.js"></script>
        <style type="text/css">

            html, body { background: #222; }

        </style>
    </head>

    <body>

        <div class="uk-contrast uk-container uk-container-center">

            <h1>Contrast</h1>

            <div class="uk-grid uk-grid-width-medium-1-4" data-uk-grid-margin>
                <div>

                    <h2>Base</h2>

                    <p>
                        The <a href="#">a element</a> example<br>
                        The <code>code element</code> example<br>
                        The <em>em element</em> example<br>
                    </p>

                    <hr>

                    <h2>Text</h2>

                    <ul class="uk-list">
                        <li><span class="uk-text-muted">text-muted</span></li>
                        <li><span class="uk-text-primary">text-primary</span></li>
                    </ul>

                </div>
                <div>

                    <h2>Button</h2>

                    <p data-uk-margin>
                        <a class="uk-button" href="#">Link</a>
                        <button class="uk-button">Button</button>
                        <button class="uk-button uk-button-primary">Button</button>
                        <button class="uk-button uk-button-success">Button</button>
                        <button class="uk-button uk-button-danger">Button</button>
                    </p>

                    <h2>Form</h2>

                    <form class="uk-form">
                        <div class="uk-form-row">
                            <input type="text" placeholder=":focus">
                        </div>
                        <div class="uk-form-row">
                            <label><input type="checkbox"> Checkbox</label>
                        </div>
                        <div class="uk-form-row">
                            <label><input type="radio" name="radio"> <input type="radio" name="radio"> Radio</label>
                        </div>
                    </form>

                </div>
                <div>

                    <h2>Icon</h2>

                    <p>
                        <a href="#" class="uk-icon-hover uk-icon-medium uk-icon-github"></a>
                        <a href="#" class="uk-icon-hover uk-icon-medium uk-icon-twitter"></a>
                        <a href="#" class="uk-icon-hover uk-icon-medium uk-icon-dribbble"></a>
                        <a href="#" class="uk-icon-hover uk-icon-medium uk-icon-html5"></a>
                    </p>

                    <p>
                        <a href="#" class="uk-icon-button uk-icon-github"></a>
                        <a href="#" class="uk-icon-button uk-icon-twitter"></a>
                        <a href="#" class="uk-icon-button uk-icon-dribbble"></a>
                        <a href="#" class="uk-icon-button uk-icon-html5"></a>
                    </p>

                </div>
                <div>

                    <h2>Subnav line</h2>

                    <ul class="uk-subnav uk-subnav-line">
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                    </ul>

                    <h2>Subnav pill</h2>

                    <ul class="uk-subnav uk-subnav-pill">
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                    </ul>

                </div>
                <div>

                    <h2>Nav</h2>

                    <ul class="uk-nav uk-nav-side">
                        <li class="uk-nav-header">Header</li>
                        <li class="uk-nav-divider"></li>
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li class="uk-parent">
                            <a href="#">Parent</a>
                            <ul class="uk-nav-sub">
                                <li><a href="#">Sub item</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Item</a></li>
                    </ul>

                </div>
                <div>

                    <h2>List line</h2>

                    <ul class="uk-list uk-list-line">
                        <li>List item 1</li>
                        <li>List item 2</li>
                        <li>List item 3</li>
                        <li>List item 4</li>
                        <li>List item 5</li>
                    </ul>

                </div>
                <div>

                    <h2>Tab</h2>

                    <ul class="uk-tab uk-margin" data-uk-tab>
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                    </ul>

                    <div class="uk-tab-center uk-margin">
                        <ul class="uk-tab" data-uk-tab>
                            <li class="uk-active"><a href="#">Active</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                        </ul>
                    </div>

                    <ul class="uk-tab uk-tab-grid uk-margin" data-uk-tab>
                        <li class="uk-width-1-3 uk-active"><a href="#">Active</a></li>
                        <li class="uk-width-1-3"><a href="#">Item</a></li>
                        <li class="uk-width-1-3"><a href="#">Item</a></li>
                    </ul>

                </div>
            </div>

        </div>

    </body>
</html>